
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Crop Box</title>
    <!-- <link rel="stylesheet" href="css/cropbox.css" type="text/css" /> -->
    <style>
        .imageBox
{
    position: relative;
    height: 400px;
    width: 400px;
    border:1px solid #aaa;
    background: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    cursor:move;
}

.imageBox .thumbBox
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    box-sizing: border-box;
    border: 1px solid rgb(102, 102, 102);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
    background: none repeat scroll 0% 0% transparent;
}

.imageBox .spinner
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 400px;
    background: rgba(0,0,0,0.7);
}
        .container
        {
            position: absolute;
            top: 10%; left: 10%; right: 0; bottom: 0;
            background-color: #FFFFFF;
        }
        .action
        {
            width: 400px;
            height: 30px;
            margin: 10px 0;
        }
        .cropped>img
        {
            margin-right: 10px;
        }
        #coor {
		    width: 10px;
		    height: 10px;
		    overflow: hidden;
		    cursor: se-resize;
		    position: absolute;
		    right: 0;
		    bottom: 0;
		    background-color: #09C;
		}
    </style>
</head>
<body>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- <script src="js/cropbox.js"></script> -->
<script src="裁剪.js"></script>
<div id="rong" class="container">
    <div class="imageBox">
        <div class="thumbBox">
        	
        	<div id="coor"></div>
        </div>
       
    </div>
    <div class="action">
        <input type="file" id="file" style="float:left; width: 250px">
        <input type="button" id="btnCrop" value="Crop" style="float: right">
        <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
		<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
    </div>
    <div class="cropped">

    </div>
</div>
<div>
	
</div>

<script type="text/javascript">
	 var _URL = window.URL || window.webkitURL;
    $(window).load(function() {
        var options =
        {
            thumbBox: '.thumbBox',
            imgSrc: 'img/t.png'
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        
        
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            var file=Base64ToFile(img);
            //console.log(file);
           // console.log(_URL.createObjectURL(file))
            
            $('.cropped').append('<img src="'+img+'">');
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
    
    function Base64ToFile(urlData){
    
	    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
	    
	    //处理异常,将ascii码小于0的转换为大于0
	    var ab = new ArrayBuffer(bytes.length);
	    var ia = new Uint8Array(ab);
	    for (var i = 0; i < bytes.length; i++) {
	        ia[i] = bytes.charCodeAt(i);
	    }

    return new Blob( [ab] , {type : 'image/png'});
}
</script>

</body>
</html>